<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <th:block th:fragment="hot_category">
    <div class="joe_index__hot">
      <div class="joe_index__title">
        <ul class="joe_index__title-title default">
          <li class="item active" data-type="created">
            [[${theme.config.home.enable_hot_title ?: '精品分类'}]]
          </li>
        </ul>
        <div class="joe_index__title-notice">
          <a th:href="@{/categories}" target="_blank" rel="noopener noreferrer nofollow">
            <i class="joe-font joe-icon-application"></i>
            全部分类
          </a>
        </div>
      </div>
      <th:block th:if="${theme.config.home.hot_category_source == 'category'}">
        <ul class="joe_index__hot-list hotlist">
          <th:block th:each="categories : ${theme.config.home.category_data}">
            <th:block th:with="category = ${categoryFinder.getByName(categories.categoryMetaData)}">
              <li class="item animated fadeIn">
                <a
                  class="link"
                  th:title="${category.spec.displayName}"
                  th:href="@{${category.status.permalink}}"
                  target="_blank"
                >
                  <figure class="inner">
                    <img
                      class="image ls-is-cached lazyload"
                      width="100%"
                      height="120"
                      th:data-src="${category.spec.cover ?: theme.config.basic.random_img_api_url+'?pageid='+category.metadata.name}"
                      th:src="${theme.config.theme.lazyload_thumbnail}"
                      th:alt="${category.spec.displayName}"
                    />
                    <figcaption class="title">[[${category.spec.displayName}]]</figcaption>
                  </figure>
                </a>
              </li>
            </th:block>
          </th:block>
        </ul>
      </th:block>
      <th:block th:if="${theme.config.home.hot_category_source == 'custom'}">
        <ul class="joe_index__hot-list hotlist">
          <th:block th:each="customData : ${theme.config.home.custom_data}">
            <li class="item animated fadeIn">
              <a class="link" th:title="${customData.title}" th:href="${customData.url}" target="_blank">
                <figure class="inner">
                  <img
                    class="image ls-is-cached lazyloaded"  
                    width="100%"
                    height="120"
                    th:data-src="@{/assets/img/hot_cover1.jpg}"
                    th:src="${customData.cover}"
                    onerror="Joe.errorImg(this)"
                    th:alt="${customData.title}"
                  />
                  <figcaption class="title">[[${customData.title}]]</figcaption>
                </figure>
              </a>
            </li>
          </th:block>
        </ul>
      </th:block>
    </div>
  </th:block>
</html>
